<template>
    <div>
        <div style="width: 1500px;height: 400px;background: cornflowerblue;margin-left: 60px" >
            <p style="color: white;margin-top: 20px;float: left;width: 1500px;font-size: 18px">最高额度(元)</p>
            <p style="color: white;width:1500px;font-size: 30px">{{product.loanAmount}}</p>
            <p style="color: white;width:1500px;">年化利率 7.2%起 </p>
            <button style="width: 300px;height: 50px;border-radius: 20px;border: none;color: mediumblue;font-size: 18px;margin-top: 50px" @click="shen()">申请借款</button>
        </div>
        <!--    规则-->
        <div style="width: 1500px;margin-left: 60px;">

            <div style="width: 500px;height: 1000px;margin-top: 20px;float: left">
                <div style="float: left;height: 50px;width: 500px;"><b>产品详情</b></div>
                <div style="width: 400px;border:2px solid greenyellow;border-radius: 25px;float: left;margin-right: 15px;margin-left: 55px">
                    <p style="margin-top: 10px">申请条件<span style="margin-left: 50px;">{{product.conditions}}</span></p>
                    <p>申请资料<span style="margin-left: 130px">{{product.material}}</span></p>
                    <p>额度范围<span style="margin-left: 150px">{{product.amountRange}}</span></p>
                    <p>年化利率<span style="margin-left: 140px">{{product.annualizedRate}}</span></p>
                    <p v-if="product.ifShow==0">日利率计算公式<span style="margin-left: 50px">日利率=年化利率/360</span></p>
                    <p>期限范围<span style="margin-left: 200px">{{product.termRange}}</span></p>
                </div>
            </div>

            <div style="width: 500px;height: 1000px;margin-top: 20px;float: left">
                <div style="float: left;height: 50px;width: 500px;"><b>申请流程</b></div>
                <div style="width: 400px;border:2px solid greenyellow;border-radius: 25px;float: left;margin-left: 35px">
                    <img :src="logo" width="350px" height="230px">
                </div>
            </div>

            <div style="width: 500px;height: 1000px;margin-top: 20px;float: left">
                <div style="float: left;height: 50px;width: 500px;"><b>还款规则</b></div>
                <div style="width: 500px;border:2px solid greenyellow;border-radius: 25px;float: left;margin-left: 20px">
                    <p style="color: deeppink">还款方式</p>
                    <p>{{product.repayment}}</p>
                    <p style="color: deeppink">预期费用</p>
                    <p>{{product.lateFee}}</p>
                </div>
            </div>

        </div>





    </div>
</template>

<script>
    export default {
        data() {
            return {
                product:{
                    productId: this.$route.query.productId
                },
                logo: require('@/assets/333.png'),
                userId:1
            }
        },
        created() {
            // this.list()
            this.getAmount()
        },
        methods: {
            list(){
                this.$http.get("/product/getByPid?productId="+this.product.productId).then( res=>{
                    console.log(res.data)
                    this.product=res.data.data
                })
            },
            shen(){
                if(this.product.cardId==null){
                    if(confirm('您未绑定银行卡,是否要去绑定?')){
                        this.$router.push({
                            path:'/bindBankCard',
                            query:{
                                userId:this.product.userId
                            }
                        })
                    }
                }else{
                    console.log('已绑定')
                    this.$router.push({
                        path:'/creditLoans',
                        query:{
                            userId:this.product.userId,
                        }
                    })
                }
            },
            // 获取个人额度
            getAmount(){
                this.$http.post('api/crud/user/getAmount?userId='+this.userId).then(res=>{
                    if(res.data.data.loanAmount!=null){
                        this.product = res.data.data
                    }
                })
            },
            // 判断是否绑定银行卡
            isBankCard(){
                // if(this.product)
            }
        }
    }
</script>

<style scoped>

</style>
